import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:yysk_app/utils/helper.dart';
import 'package:yysk_app/widget/button_widget.dart';
import 'package:yysk_app/widget/custom_app_bar2.dart';
import 'package:yysk_app/widget/image_asset_widget.dart';
import 'bind_bank_controller.dart';

class BindBankPage extends GetView<BindBankController> {
  static const path = '/bindBank';
  const BindBankPage({super.key});

  @override
  Widget build(BuildContext context) {
    final double top = MediaQuery.of(context).padding.top;
    return Scaffold(
      body: Stack(
          children: [
            //添加背景色，代码如下：
            SizedBox(
              width: context.width,
              child: ImageAssetWidget(
                width: double.infinity,
                height: 173.px,
                imageUrl: 'static/images/wallet/top_bg.png',
              ),
            ),
            Positioned(
                right: 0,
                bottom: 0,
                child: ImageAssetWidget(
                  width: 216.px,
                  height: 253.px,
                  imageUrl: 'static/images/wallet/bottom_bg.png',
                ),
              ),
            Padding(
              padding: EdgeInsets.fromLTRB(0, top, 0, 24.px),
              child: Column(
                children: [
                  CustomAppBar2(title: '绑定银行卡', context: context),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 24),
                      child: ListView(
                        children: [
                          const SizedBox(height: 24),
                          _inputItem('银行卡号', controller.bankCardController, '请输入您的银行卡号'),
                          _inputItem('手机号', controller.phoneController, '请输入手机号'),
                          const SizedBox(height: 32),
                          ButtonWidget(
                              label: '确认绑定',
                              height: 54,
                              width: 322,
                              fontSize: 22.px,
                              imageBg: 'static/images/btm.png',
                              contentType: ContentType.other,
                              onPressed: controller.canBind.value ? controller.bindBank : null,
                            ),
                          // SizedBox(
                          //   width: double.infinity,
                          //   height: 48,
                          //   child: ElevatedButton(
                          //     onPressed: controller.canBind.value ? controller.bindBank : null,
                          //     style: ElevatedButton.styleFrom(
                          //       backgroundColor: controller.canBind.value ? Colors.black : Colors.grey,
                          //       shape: RoundedRectangleBorder(
                          //         borderRadius: BorderRadius.circular(24),
                          //       ),
                          //     ),
                          //     child: const Text('确定绑定', style: TextStyle(fontSize: 18.px, color: Colors.white)),
                          //   ),
                          // ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
    );
  }

  Widget _inputItem(String label, TextEditingController controller, String hint) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label, style: const TextStyle(color: Colors.black45, fontSize: 16)),
        const SizedBox(height: 8),
        TextField(
          controller: controller,
          decoration: InputDecoration(
            hintText: hint,
            hintStyle: const TextStyle(color: Colors.black26),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: const BorderSide(color: Colors.black12),
            ),
            enabledBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: const BorderSide(color: Colors.black12),
            ),
            focusedBorder: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: const BorderSide(color: Colors.black),
            ),
            contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          ),
        ),
        const SizedBox(height: 16),
      ],
    );
  }
}
